<template>
  <div style="height: 90%; width: 22vw;">
    <dv-border-box9>
      <dv-border-box8 style="width: 100%;">
        <div style="overflow: hidden;">
          <div style="width: 100%;">
            <p style="color: #33f2dc; font-size: 1vw; text-align: center; padding-top: 0.2vw">数据展示</p>
            <div style="display: flex; justify-content: center; align-items: center; background-color: #08292e; color: #41b4a7; width: 90%; margin-left: 1vw;">
              <p>所属大棚</p>
              <p style="margin-left: 5vw; margin-right: 5vw">名称</p>
              <p>值</p>
            </div>
          </div>
          <el-carousel :interval="5000" arrow="always" direction="vertical" height="800px" style="width: 100%;">
            <el-carousel-item v-for="data in dataList" :key="data.id">
              <div style="background: #195453; border-radius: 4px; padding: 0.5rem; color: #33f2dc; font-size: 0.8rem;">
                <div style="display: flex; justify-content: space-between;">
                  <p>{{ data.boxId }}</p>
                  <p>{{ data.name }}</p>
                  <p>{{ data.value }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </dv-border-box8>
    </dv-border-box9>
  </div>
</template>

<script setup lang="ts">
import { Decoration5 as DvDecoration5 } from '@kjgl77/datav-vue3'
import { Decoration8 as DvDecoration8 ,Decoration6 as DvDecoration6} from '@kjgl77/datav-vue3'
import { BorderBox11 as DvBorderBox11, BorderBox8 as DvBorderBox8 ,BorderBox9 as DvBorderBox9,BorderBox3 as DvBorderBox3} from '@kjgl77/datav-vue3'
import {inject, onMounted, onUnmounted, ref} from "vue";
import Camera from "@/components/camera.vue";
import {MostlyCloudy} from "@element-plus/icons-vue";
import BrokenLine from "@/components/brokenLine.vue";
interface DataItem {
  id: number;
  boxId: string;
  name: string;
  value: string;
}

const dataList = ref<DataItem[]>([
  { id: 1, boxId: '大棚1', name: '温度', value: '25°C' },
  { id: 2, boxId: '大棚2', name: '湿度', value: '60%' },
  { id: 3, boxId: '大棚3', name: '光照', value: '800 lux' },
  { id: 4, boxId: '大棚4', name: 'CO2', value: '400 ppm' },
  { id: 5, boxId: '大棚5', name: '土壤湿度', value: '30%' },
  { id: 6, boxId: '大棚6', name: '风速', value: '2 m/s' },
  { id: 7, boxId: '大棚7', name: '降雨量', value: '0 mm' },
  { id: 8, boxId: '大棚8', name: '气压', value: '1013 hPa' },
  // 更多数据...
]);
</script>

<style scoped>
/* 可以在这里添加一些样式来进一步美化组件 */
</style>